<template>
  <div id="login-container">
    <!-- <img src="../assets/img/login.png" alt="" /> -->
    <!-- <div id="avatar-box">
      <h1 style="color:#fff">
        老西门街道小型建设工程管理
      </h1>
    </div> -->
    <div id="img-box">
      <h1 style="color:#fff">
        老西门街道店招店牌管理系统
      </h1>
    </div>
    <div class="login_box">
      <div id="login-box">
        <div class="login-title">
          <span>您好！</span>
          <span>请登录</span>
        </div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
          <el-form-item prop="userid">
            <el-input v-model="loginForm.userid" placeholder="请输入用户账号">
              <i slot="prefix" class="el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              show-password
              placeholder="请输入密码"
            >
              <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item class="last-form-item">
            <el-row>
              <el-col :span="4">
                <el-checkbox
                  v-model="checked"
                  :checked="checked"
                  @change="setCheckBox"
                  >记住密码</el-checkbox
                >
              </el-col>
              <el-col :span="6" :offset="14">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="dialogFormVisible = true"
                  >忘记密码？</el-link
                >
              </el-col>
            </el-row>
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <el-button type="primary" @click="login()">登录</el-button>
              <!-- <el-button type="info" @click="$refs.loginFormRef.resetFields()"
                >重置</el-button
              > -->
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-dialog
      title="密码验证"
      width="25%"
      top="30vh"
      :visible.sync="dialogFormVisible"
      @close="closeDialogFormVisible"
    >
      <el-form :inline="true" ref="form" :model="form" :rules="forgetForm">
        <el-form-item prop="name" label="用户账号:" label-width="100px">
          <el-input
            placeholder="请输入用户账号"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话号码:" label-width="100px">
          <el-input
            placeholder="请输入电话号码"
            v-model="form.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="forget()">验 证</el-button>
        <el-button @click="reset()">取 消</el-button>
      </div>
    </el-dialog>
    <!-- <div class="bottom_box"></div> -->
  </div>
</template>

<script>
import qs from "qs";
import { setToken } from "../utils/auth";
export default {
  created() {
    // window.sessionStorage.removeItem("token");
    // window.sessionStorage.removeItem("userData");
    let flag = window.localStorage.getItem("flag");
    let username = window.localStorage.getItem("username");
    let password = window.localStorage.getItem("password");
    if (flag) {
      this.checked = true;
    }
    this.loginForm.userid = username;
    this.loginForm.password = password;
  },
  methods: {
    // 管理员登录系统
    async login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (valid === true) {
          // axios带着"用户名和密码"到达服务器端做有效性校验
          // if (this.checked) {
          //   window.sessionStorage.setItem("userData", this.loginForm);
          // }
          // var {
          //   data: { error_code, error_msg, user }
          // } = await this.$http.get("rf/login", {
          //   params: {
          //     username: this.loginForm.userid,
          //     password: this.loginForm.password
          //   }
          // });
          // if (error_code !== 0) {
          //   return this.$message.error(error_msg);
          // }
          // 在前端通过sessionStorage把服务器返回的token令牌存储好
          //window.sessionStorage.setItem("token", user.user_name);
          // user.user_qx = JSON.parse(user.user_qx);
          //window.sessionStorage.setItem("userData", JSON.stringify(user));
          // 编程式导航，进行路由跳转执行/home
          this.$request({
            url: "/rf/login",
            method: "post",
            data: qs.stringify({
              username: this.loginForm.userid,
              password: this.loginForm.password
            })
          })
            .then(async response => {
              if (response.error_code == 0) {
                setToken(response.user.token);
                window.localStorage.setItem(
                  "setUser",
                  JSON.stringify(response.user)
                );
                const s = this.$store.dispatch("setUser", response.user);
                if (this.checked) {
                  window.localStorage.setItem("flag", "1");
                  window.localStorage.setItem(
                    "username",
                    this.loginForm.userid
                  );
                  window.localStorage.setItem(
                    "password",
                    this.loginForm.password
                  );
                }
                //跳转页面
                this.$router.push({ path: "/home" });
              } else {
                this.$message({ message: response.error_msg, type: "info" });
              }
            })
            .catch(error => {
              this.$message({
                message: "登录失败，网络异常",
                type: "info",
                duration: 2000
              });
            });
        }
      });
    },
    closeDialogFormVisible() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
    },
    //忘记密码
    reset() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
    },
    forget() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.$request({
            url: "/rf/login",
            method: "get",
            params: {
              username: this.form.name,
              phone: this.form.phone
            }
          })
            .then(async response => {
              if (response.error_code == 0) {
                setToken(response.user.token);
                window.localStorage.setItem(
                  "setUser",
                  JSON.stringify(response.user)
                );
                const s = this.$store.dispatch("setUser", response.user);
                //跳转页面
                this.$router.push({ path: "/home" });
              } else {
                this.$message({ message: response.error_msg, type: "info" });
              }
            })
            .catch(error => {
              this.$message({
                message: "登录失败，网络异常",
                type: "info",
                duration: 2000
              });
            });

          // var {
          //   data: { error_code, error_msg, user}
          // } = await this.$http.get("rf/login", {
          //   params: {
          //     phone: this.form.phone
          //   }
          // });
          // if (error_code === 0) {
          //   this.dialogFormVisible = false;
          //   setToken(user.token);
          //   window.localStorage.setItem('setUser',JSON.stringify(user));
          //   const s = this.$store.dispatch('setUser',user);
          //   this.$router.push("/home");
          // } else {
          //   this.$message({
          //     showClose: true,
          //     message: "未找到匹配用户",
          //     type: "error"
          //   });
          // }
        }
      });
    },
    setCheckBox(val) {
      if (!val) {
        window.localStorage.removeItem("flag");
        window.localStorage.removeItem("username");
        window.localStorage.removeItem("password");
      }
    }
  },
  data() {
    return {
      // 表单校验规则定义
      loginFormRules: {
        userid: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      forgetForm: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }]
      },
      // form表单数据对象
      loginForm: {
        userid: "", // 用户名称
        password: "" // 用户密码
      },
      form: {
        name: "",
        phone: ""
      },
      checked: false,
      dialogFormVisible: false,
      rule: "_admin"
    };
  }
};
</script>

<style lang="less" scoped>
.bottom_box {
  // background: url("../assets/img/02.png") no-repeat;
  background-size: 100% 100%;
  height: 15%;
  width: 100%;
  position: absolute;
  bottom: 0;
}
#login-container {
  background: url("../assets/img/login-bg.png") no-repeat;
  background-size: 100% 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  img {
    width: 40%;
    position: absolute;
    top: 20%;
  }
  #img-box {
    // width: 280px;
    text-align: center;
    height: 45px;
    margin-top: 60px;
    margin-bottom: 80px;
    h1 {
      font-size: 58px;
    }
  }
  .login_box {
    position: absolute;
    right: -110px;
    top: 25%;
    transform: translateX(-50%);

    #login-box {
      width: 450px;
      height: 400px;
      background: #ffffff;
      border-radius: 20px;
      .login-title {
        width: 348px;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 30px;
        span {
          font-size: 24px;
          font-weight: 400;
          color: #000000;
          padding-bottom: 10px;
          font-family: Source Han Sans SC;
        }
        span:first-child {
          border-bottom: 2px #028cff solid;
        }
      }
      .el-form {
        // position: absolute;
        // bottom: 0;
        width: 348px;
        // padding: 20px auto;
        box-sizing: border-box;
        margin: 20px auto;
        .el-row {
          .el-col {
            .el-button {
              width: 100%;
              background: linear-gradient(-90deg, #503afc 0%, #008eff 100%);
              border-radius: 24px;
              font-size: 20px;
              &:hover {
                box-shadow: 1px 8px 18px 0px rgba(0, 138, 255, 0.41);
              }
            }
          }
        }
      }
    }
  }
  /deep/.el-dialog__wrapper {
    .el-dialog {
      margin-right: 140px !important;
    }
  }
}
</style>
